<template>
	<view>
		<u-navbar title="群简介">
			<view v-if="canEdit" slot="right" class="u-p-x-16 u-p-y-4 u-m-r-30 radius" @tap="save" :class="{'bg-grey':!brief,'bg-blue':brief}">
				<text class="u-font-28">保存</text>
			</view>
		</u-navbar>
		<view class="u-m-t-20 bg-white u-p-30" v-if="canEdit">
			<textarea class="textarea u-font-28" maxlength="50" v-model="brief" placeholder="请输入简介"/>
			<view class="text-gray u-text-right u-m-t-40">
				<text>{{brief.length}}/50</text>
			</view>
		</view>
		<view class="bg-white textarea u-m-t-20 u-p-30" v-else>
			<text :class="{'text-gray':!brief}">{{brief||'暂无群介绍'}}</text>
		</view>
	</view>
</template>

<script>
	import {goback} from '@/utils/util.js'
	import {state} from "../bus.js"
	import {editGroupBrief} from "@/api/addr.js"
	import {mapGetters} from "vuex"
	export default {
		data() {
			return {
				brief:''
			};
		},
		computed:{
			...mapGetters('user',['userId']),
			canEdit(){
				return state.power.vest=='群主'||state.power.vest=='管理员'
			}
		},
		onLoad(){
			this.brief = state.info.brief
		},
		methods:{
			async save(){
				if(this.save.lock||!this.brief){
					return
				}
				try{
					this.save.lock = true
					
					await editGroupBrief({id:state.info.id,brief:this.brief})
					state.info.brief = this.brief
					goback()
				}finally{
					this.save.lock = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.textarea{
		width: 100%;
		height: 200rpx;
	}
</style>
